import React, { Component } from 'react';
import TopBox from '../components/TopBox';
import '../styles/Collection/CollectionPage.scss'
import * as service from '../api/index';
import { NavBar } from 'antd-mobile';


class CollectionPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            favlist: []
        }
    }
    componentDidMount() {
        console.log('componentDidMount');
        //一般在这个方法中 发送ajax请求, 创建定时器, 监听事件
        service.good_favlist({ userid: localStorage.getItem("userid") }).then((res) => {
            console.log(res);
            this.setState({ favlist: res.data.list });
            // eslint-disable-next-line react/no-direct-mutation-state
            this.state.goodList = res.data.list
        })
    }
    back() {
        //返回上一个路由
        this.props.history.go(-1);
    }
    unfav(id) {
        service.good_unfav({ userid: localStorage.getItem("userid"), goodid: id }).then((res) => {
            console.log(res.data)
            service.good_favlist({ userid: localStorage.getItem("userid") }).then((res) => {
                console.log(res)
                this.setState({
                    favlist: res.data.list
                })
            })
        })
        console.log(id);
    }
    render() {
        return (
            <div className='CollectionPage'>
                {/* 收藏页 */}
                {/* 返回顶部 */}
                {<TopBox />}
                <NavBar onBack={() => { this.back() }}>收藏页</NavBar>
                <div className='CollectionPage_list'>
                    {
                        this.state.favlist.map((item, index) => {
                            return (
                                <div className='CollectionPage_item'>
                                    <img src={item.pic} alt="" />
                                    <div className='CollectionPage_box'>
                                        <div>{item.name}</div>
                                        <div className='CollectionPage_price'>
                                            价格:{item.salesPrice.value}
                                            <div className='CollectionPage_delete' onClick={(e) => {
                                                this.unfav(item.id, e)
                                            }}>取消收藏</div>
                                        </div>
                                    </div>

                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default CollectionPage;